<template>
    <ul class="tag-list">
        <li
            class="tag-item"
            :id="`tag_` + item.id"
            v-for="item in list"
            :key="item.id"
        >
            <nuxt-link :to="{ path: '/blog', query: { tag: item.id } }">
                {{ item.title }}
            </nuxt-link>
        </li>
    </ul>
</template>

<script>
export default {
    name: "tag-list",
    props: {
        list: {
            type: [Array, Object],
        },
    },
    data() {
        return {
            id: this.$route.query.tag,
        };
    },
    watch: {
        // 监听路由变化
        $route(to) {
            this.id = to.query.tag;
            this.onClickTag(to.query.tag);
        },
    },
    mounted() {
        this.onClickTag(this.id);
    },
    methods: {
        onClickTag(id) {
            let $liCur = $("#tag_" + id);
            $liCur.addClass("active").siblings().removeClass("active");
        },
    },
};
</script>


<style lang="less" scoped>
.tag-list {
    padding: 15px;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;

    .tag-item {
        a {
            color: #606f7b;
            display: inline-block;
            padding: 3px 15px;
            border-radius: 31px;
            margin: 0 10px 12px 0;
            font-family: sans-serif;
            font-weight: 600;
            font-size: 16px;
            border: 1px solid #dae1e7;

            &:hover {
                background: #525251;
                color: #fff;
            }
        }
    }

    .tag-item.active {
        a {
            background: #525251;
            color: #fff;
            text-decoration: none;
        }
    }
}
</style>